<template>
    <div class="list">
        <ul class="good-list" v-if="list">
            <!-- query传参演示 -->
            <!-- <li v-for="goods in list" :key="goods.goodsId">
                <router-link to="/detail?a=1&b=2">
                    <img :src="goods.goodsImg" alt="">
                    <p class="desc">{{ goods.goodsName }}</p>
                    <p class="price">¥{{ goods.goodsPrice }}</p>
                </router-link>
            </li> -->

            <!-- '/detail?gid='+goods.goodsId -->
            <!-- <li v-for="goods in list" :key="goods.goodsId">
                <router-link :to="'/detail?gid='+goods.goodsId">
                    <img :src="goods.goodsImg" alt="">
                    <p class="desc">{{ goods.goodsName }}</p>
                    <p class="price">¥{{ goods.goodsPrice }}</p>
                </router-link>
            </li> -->

            <li v-for="goods in list" :key="goods.goodsId">
                <router-link :to="{path:'/detail',query:{c:3,d:4,gid:goods.goodsId}}">
                    <img :src="goods.goodsImg" alt="">
                    <p class="desc">{{ goods.goodsName }}</p>
                    <p class="price">¥{{ goods.goodsPrice }}</p>
                </router-link>
            </li>




            <!-- 
                params传参 动态路径参数 => 将需要传输的数据拼接到路径中,作为路径的一部分传入()

                路由配置时: 
                三级路由:  /detail-copy/a/b  路径/后没有加: 就是普通路由
                (动态路径参数):  /detail-copy/:a/:b  路径之后 : 开头,  => 一级路由,接收两个参数

                页面跳转时传入数据:  /detail-copy/1/2

                => 解析为 {a:1,b:2}



            
            -->

            <!-- '/detail-copy/' + goods.goodsId + '.html' -->
            <!-- <li v-for="goods in list" :key="goods.goodsId">
                <router-link :to=" '/detail-copy/'+ goods.goodsId + '.html' ">
                    <img :src="goods.goodsImg" alt="">
                    <p class="desc">{{ goods.goodsName }}</p>
                    <p class="price">¥{{ goods.goodsPrice }}</p>
                </router-link>
            </li> -->

            <!-- <li v-for="goods in list" :key="goods.goodsId">
                <router-link :to="{name:'detail-copy',params:{gid:goods.goodsId}}">
                    <img :src="goods.goodsImg" alt="">
                    <p class="desc">{{ goods.goodsName }}</p>
                    <p class="price">¥{{ goods.goodsPrice }}</p>
                </router-link>
            </li> -->
        </ul>
    </div>
</template>

<script>
    import axios from "axios"

    // import pic from "@/assets/pic.jpg"
    // console.log(1111,pic);

    export default {
        name:"ListView",
        data(){
            return {
                list:null,
            }
        },
        mounted () {

            axios.get("http://121.43.116.41/demo/php/searchAllGoods.php",{
                params:{}
            }).then(responseOption=>{
                console.log("响应配置对象",responseOption);
                if(responseOption.status == 200){
                    return responseOption.data;
                }
            }).then(res=>{
                /* 
                    服务器返回数据 (后端定义)
                    {
                        status: 数据增删改查成功/失败,
                        message:"操作提示信息",
                        list:[],  // 数组=>返回数据有多条就放到数组中
                        data:{},  // 如果返回数据时单条,一般放到data中
                    }
                */
                console.log("请求数据",res);  

                if(res.status){
                    this.list = res.list;
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
    /* .good-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.1rem;
    }

    .good-list li{
        width: 48%;
        
    }

    .good-list li img{
        width: 100%;
    } */


    .good-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.1rem;

        li{
            width: 48%;
            margin-bottom: 0.1rem;

            img{
                width: 100%;
            }

            .desc{
                line-height: 0.32rem;

                display:-webkit-box;          //将对象作为弹性伸缩盒子模型显示
                -webkit-box-orient:vertical;  //从上到下垂直排列子元素
                -webkit-line-clamp:2;         //显示的行数
                overflow:hidden;              //超出盒子宽度内容，便溢出隐藏  
                text-overflow:ellipsis;       //用...省略号显示
            }
            .price{
                color: #ff4142;
            }
        }
    }
  
</style>